<template>
  <el-container>
    <el-main>
      <div
        v-if=!flag
        style="text-align:left"
      >
        <el-input
          v-model="newsection.sectionName"
          style="width:300px"
          placeholder="请输入添加科目名称"
          @keyup.enter.native='addsection'
        ></el-input>
        <el-button
          @click="addsection"
          style="margin-left:40px;margin-right:10px"
          type="primary"
        >添加科目<i class="el-icon-upload el-icon--right"></i></el-button>
        <el-table
          class="table table-hover"
          style="table-layout:fixed;text-align:left;margin-top:20px"
          width="100%"
          :data="list"
        >
          <el-table-column
            label="编号"
            prop="sid"
          ></el-table-column>
          <el-table-column
            label="科目名称"
            prop="sectionName"
          ></el-table-column>
          <el-table-column align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.sid)"
              >Delete</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "Managesection",
  data() {
    return {
      flag: false ,
      list: [],
      newsection: {
        sectionName: ""
      },
    };
  },
  created(){
    this.$http.get("/api/section").then((res) => {
      // console.log(res.data.sections);
      this.list=res.data.sections;
    })
  },
  methods: {
    addsection(){
      this.$http.post("/api/section",this.newsection).then((res)=>{
        // console.log(res.status);
        if(res.status == 200) {
          this.$message({
            message: "添加成功",
            type: "success",
            duration: 3000
          });
        }
        else {
          this.$message({
            message: "添加失败",
            type: "error",
            duration: 3000
          });
        }
        setTimeout("window.location.reload()", 500);
      })
    },
    handleDelete(id) {
      // console.log(id);
      this.$http.delete("/api/section/" + id).then((res)=>{
        // console.log(res.status);
        if(res.status == 200) {
          this.$message({
            message: "删除成功",
            type: "success",
            duration: 3000
          });
        }
        else {
          this.$message({
            message: "删除失败",
            type: "error",
            duration: 3000
          });
        }
        this.$http.get("/api/section").then((res) => {
          // console.log(res.data.sections);
          this.list=res.data.sections;
        })
      })
    },
  }
};
</script>

<style lang = "less" scoped>
</style>
